<template>
  <div style="cursor: pointer">
    <div v-if="props.ischange">
      <i
        v-if="store.styleInfo.styleType == 1"
        class="iconfonts"
        :style="{
          fontFamily: store.styleInfo.fontFamily,
          fontSize: props.fontsize,
          color: store.styleInfo.shmentColor,
        }"
      >
        &#xe602;
      </i>
      <i
        v-if="store.styleInfo.styleType == 2"
        class="iconfonts"
        :style="{
          fontFamily: store.styleInfo.fontFamily,
          fontSize: props.fontsize,
          color: store.styleInfo.themeColor,
        }"
      >
        &#xe60d;
      </i>
      <i
        v-if="store.styleInfo.styleType == 3"
        class="iconfonts"
        :style="{
          fontFamily: store.styleInfo.fontFamily,
          fontSize: props.fontsize,
          color: store.styleInfo.themeColor,
        }"
      >
        &#xe613;
      </i>
      <i
        v-if="store.styleInfo.styleType == 4"
        class="iconfonts"
        :style="{
          fontFamily: store.styleInfo.fontFamily,
          fontSize: props.fontsize,
          color: store.styleInfo.themeColor,
        }"
      >
        &#xe603;
      </i>
    </div>
    <div v-else>
      <i
        v-if="store.styleInfo.styleType == 1"
        class="iconfonts"
        :style="{
          fontFamily: store.styleInfo.fontFamily,
          fontSize: props.fontsize,
          color: store.styleInfo.themeColor,
        }"
      >
        &#xe61f;
      </i>
      <i
        v-if="store.styleInfo.styleType == 2"
        class="iconfonts"
        :style="{
          fontFamily: store.styleInfo.fontFamily,
          fontSize: props.fontsize,
          color: store.styleInfo.themeColor,
        }"
      >
        &#xe60a;
      </i>
      <i
        v-if="store.styleInfo.styleType == 3"
        class="iconfonts"
        :style="{
          fontFamily: store.styleInfo.fontFamily,
          fontSize: props.fontsize,
          color: store.styleInfo.themeColor,
        }"
      >
        &#xe619;
      </i>
      <i
        v-if="store.styleInfo.styleType == 4"
        class="iconfonts"
        :style="{
          fontFamily: store.styleInfo.fontFamily,
          fontSize: props.fontsize,
          color: store.styleInfo.themeColor,
        }"
      >
        &#xe61c;
      </i>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useProjectStore } from '@/store';
const store = useProjectStore();
const props = defineProps({
  ischange: {
    type: Boolean,
  },
  fontsize: {
    type: String,
  },
});
</script>

<style lang="less" scoped></style>
